<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/world.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: white;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .chart-container {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s;
        }
        .chart-container:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div id="7d532d743f4a44eea112ae47fb5f0603" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_7d532d743f4a44eea112ae47fb5f0603 = echarts.init(
            document.getElementById('7d532d743f4a44eea112ae47fb5f0603'), 'white', {renderer: 'canvas'});
        var option_7d532d743f4a44eea112ae47fb5f0603 = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "aria": {
                "enabled": false
            },
            "color": [
                "#5470c6",
                "#91cc75",
                "#fac858",
                "#ee6666",
                "#73c0de",
                "#3ba272",
                "#fc8452",
                "#9a60b4",
                "#ea7ccc"
            ],
            "series": [
                {
                    "type": "map",
                    "name": "Global Map",
                    "label": {
                        "show": true,
                        "formatter": function(params) {
                            return params.value ? params.name : '';
                        },
                        "margin": 8
                    },
                    "map": "world",
                    "data": [
                        {"name": "China", "value": 52},
                        {"name": "Germany", "value": 14},
                        {"name": "France", "value": 83},
                        {"name": "United States", "value": 39},
                        {"name": "Japan","value": 77},
                        {"name":"Russia","value": 100},
                        {"name":"United Kingdom","value": 200},
                        {"name":"Brazil","value": 40},
                        {"name":"Italy","value": 10},
                        {"name":"India","value": 100},
                        {"name":"Canada","value": 100},
                        {"name":"Australia","value": 60},
                        {"name":"Spain","value": 80},
                        {"name":"South Korea","value": 70},
                        {"name":"Mexico","value": 30},
                        {"name":"Indonesia","value": 10},
                        {"name":"Netherlands","value": 12},
                        
                    ],
                    "roam": true,
                    "aspectScale": 0.75,
                    "nameProperty": "name",
                    "selectedMode": false,
                    "zoom": 1,
                    "zlevel": 0,
                    "z": 2,
                    "seriesLayoutBy": "column",
                    "datasetIndex": 0,
                    "mapValueCalculation": "sum",
                    "showLegendSymbol": true,
                    "itemStyle": {
                        "borderColor": "#333",
                        "borderWidth": 1
                    },
                    "emphasis": {
                        "itemStyle": {
                            "borderColor": "#000",
                            "borderWidth": 2
                        }
                    }
                }
            ],
            "legend": [
                {
                    "data": ["世界地图"],
                    "selected": {},
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14,
                    "backgroundColor": "transparent",
                    "borderColor": "#ccc",
                    "borderRadius": 0,
                    "pageButtonItemGap": 5,
                    "pageButtonPosition": "end",
                    "pageFormatter": "{current}/{total}",
                    "pageIconColor": "#2f4554",
                    "pageIconInactiveColor": "#aaa",
                    "pageIconSize": 15,
                    "animationDurationUpdate": 800,
                    "selector": false,
                    "selectorPosition": "auto",
                    "selectorItemGap": 7,
                    "selectorButtonGap": 10
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "enterable": false,
                "confine": false,
                "appendToBody": false,
                "transitionDuration": 0.4,
                "formatter": function(params) {
                    return `${params.name}: ${params.value}`;
                },
                "textStyle": {
                    "fontSize": 16,
                    "color": "#fff"
                },
                "backgroundColor": "rgba(50,50,50,0.7)",
                "borderColor": "#fff"
            },
            "title": [
                {
                    "show": true,
                    "target": "blank",
                    "subtarget": "blank",
                    "padding": 5,
                    "itemGap": 10,
                    "textAlign": "auto",
                    "textVerticalAlign": "auto",
                    "triggerEvent": false
                }
            ],
            "visualMap": {
                "type": "continuous",
                "min": 0,
                "max": 100,
                "inRange": {
                    "color": ["#50a3ba", "#eac763", "#d94e5d", "#ff0000"]
                },
                "calculable": true,
                "inverse": false,
                "orient": "vertical",
                "padding": 10,
                "showLabel": true,
                "itemWidth": 30,
                "itemHeight": 200,
                "borderWidth": 1,
                "borderColor": "#aaa"
            }
        };
        chart_7d532d743f4a44eea112ae47fb5f0603.setOption(option_7d532d743f4a44eea112ae47fb5f0603);

        chart_7d532d743f4a44eea112ae47fb5f0603.on('click', function (params) {
            alert('你点击了: ' + params.name + '\n值: ' + params.value);
        });
    </script>
</body>
</html>
